<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;">

      <div class="icons-item" style="height:72px;color:#ffffff;text-align:center;padding:20px 0 100px 0;">
        <Avatar icon="ios-person"/>
      </div>

      <ul style="padding: 0!important;list-style: none!important;">
        <a class="icons-item"
           style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-desktop" size="24" style="color:#ffffff;"/>
          <p>管理端</p>
        </a>


        <a class="icons-item"
           style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-people" size="24" style="color:#ffffff;"/>
          <p>员工端</p>
        </a>

        <a class="icons-item"
           style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-help-circle" size="24" style="color:#ffffff;"/>
          <p>问题管理</p>
        </a>
      </ul>
    </Col>
    <Col span="23" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="8">


              </Col>
              <Col span="4" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;"></Col>
              <Col span="12">


              </Col>
            </Row>

          </Breadcrumb>
          <Card :bordered="true" dis-hover>
            <p slot="title" style="height:32px;">授权企业微信登录
            </p>

            <div style="height:300px;">

              <Row type="flex" justify="center" class="code-row-bg">
                <Col span="6"></Col>
                <Col span="12" style="text-align:center;">

                  <p style="padding:20px 0 20px 0">{{loginmsg}}</p>

                  <i-circle :percent="percent" :stroke-color="color">
                    <Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
                    <span v-else style="font-size:24px">{{ percent }}%</span>
                  </i-circle>

                </Col>
                <Col span="6"></Col>
              </Row>

            </div>

          </Card>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';

  export default {
    data() {
      return {
        code: this.$route.query.code ? this.$route.query.code : '',
        state: this.$route.query.state ? this.$route.query.state : '',
        appid: this.$route.query.appid ? this.$route.query.appid : '',
        percent: 0,
        loginmsg: '正在登录'
      };
    },
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');

        if (!uid || !token) {
          /**
           this.$Modal.warning({
                            title: '提示',
                            content: '请在企业微信授权登录后使用'
                        });
           **/
        }

        // console.log('code:' + this.code)
        this.percent += 10;
        this.$Loading.start();
        var str = {code: this.code, loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/sign/work', {alldata: strdata.alldata}).then((response) => {
          this.loginmsg = '请求成功,正在读取数据';
          this.percent += 10;
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res);
          if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.loginmsg = '登录成功,正在跳转';
            this.percent = 100;
            cookie.set('isAdmin', res.data.isAdmin);
            cookie.set('uid', res.data.uid);
            cookie.set('token', res.data.token);
            if (cookie.get('isAdmin') == 2) {
              cookie.set('uid','')
              cookie.set('token','')
            }
            if (res.data.isAdmin == 1) {
              cookie.set('loginType',1)
              this.$router.push({
                path: '/?id=999'
              })
            } else {
              cookie.set('loginType',2)
              this.$router.push({
                path: '/item/staff/'
              })
            }
          }
        }).catch(function (error) {
          //this.$Message.error('网络错误');
          console.log(error);
        });
      }
    },
    computed: {
      color() {
        let color = '#2db7f5';
        if (this.percent == 100) {
          color = '#5cb85c';
        }
        return color;
      }
    },
    created() {
      console.log('Wellcome')
      window.document.title = '微信授权登录';
      this.getData();
      if (cookie.get('isAdmin') == 0) {
        this.$router.push({
          path: '/item/staff/'
        })
      }
    }
  }
</script>

